<template>
  <view class="content">
    <up-toast ref="uToastRef"></up-toast>
    <view class="upinput">
      <up-input placeholder="请输入订单号" border="none" v-model="dataInfo.orderNo">
      </up-input>
      <view class="search">
        <up-icon name="search" color="#2979ff" size="28" @click="changeInput"></up-icon>
      </view>
    </view>
    <up-tabs
      :list="tabsList"
      @click="tabClick"
      style="background-color: #edf2fa; border-bottom: 1px solid #e3e6e9"
      :inactiveStyle="{ color: '#000000' }"
      :activeStyle="{ color: '#3c9cff' }"
    ></up-tabs>
    <view class="not-stock" v-if="dataList.length">
      <view v-for="(item, index) in dataList" :key="index" class="item">
        <view class="first-child">
          <text class="order">订单号：</text>
          <up-copy :content="item.orderNo">
            <text class="text">{{ item.orderNo }}</text>
          </up-copy>
        </view>
        <view class="information"
          ><text class="order">下单时间：</text
          ><text class="text">{{ item.orderTime }}</text></view
        >
        <view class="information"
          ><text class="order">订单信息：</text
          ><text class="text">{{ item.orderInformation }}</text></view
        >
      </view>
    </view>
    <up-empty
      v-else
      mode="order"
      icon="http://cdn.uviewui.com/uview/empty/order.png"
    ></up-empty>
  </view>
</template>
<script setup lang="ts">
const tabsList = ref<any>([{ name: "全部" }, { name: "待确认" }, { name: "已取消" }]);
const dataList = ref<any>([]);
const uToastRef = ref<any>("");
const dataInfo = ref<any>({});
const tabClick = (e: any) => {
  console.log("e.index", e.index);
  switch (e.index) {
    case 0:
      break;
    case 1:
      break;
    case 2:
      break;
    default:
  }
};

const changeInput = () => {};
</script>
<style lang="scss" scoped>
.content {
  .up-input {
    background-color: white;
    padding: 10px;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
  }

  .not-stock {
    padding: 10px;
    .item {
      .first-child {
        display: flex;
      }
      padding: 10px 0;
      &:not(:first-child) {
        margin-top: 10px;
      }
      border-bottom: 1px solid #e3e6e9;
      .order {
        min-width: 80px;
        text-align: right;
        color: #000;
      }
      .text {
        color: #b8babf;
      }
    }
    .information {
      padding: 5px 0;
    }
  }
}
.upinput {
  background-color: white;
  padding: 5px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe2e5;
  margin: 10px;
  border-radius: 4px;
}
</style>
